<template>
    <div class="rank" ref="rank">
        <scroll :data="topListGroup" class="top-scroll" ref="topListGroup">
            <ul class="top-list-groups">
                <m-header title="排行榜"></m-header>
                <li class="top-list-group">
                    <ul class="top-list">
                        <p class="group-title">{{listGroup.groupName}}</p>
                        <li class="item"
                            v-for="(item, index) in listGroup.topList"
                            :key="index"
                            @click="selectItem(item)"
                        >
                            <ul class="song-list">
                                <p class="list-title">{{item.title}}</p>
                                <li class="song" v-for="(song, index) in item.songList" :key="index">
                                    <span class="index">{{index + 1}}.</span>
                                    <span class="song-name">
                                        {{song.title}} -
                                        <span class="singer-name">{{song.singerName}}</span>
                                    </span>
                                </li>
                            </ul>
                            <div class="icon">
                                <div class="updata">{{item.updateTips}}</div>
                                <img class="img" src="" width="100" height="100" v-lazy="item.imgUrl" />
                                <div class="buttom">
                                    <span class="listenNum-icon iconfont icon-headset"></span>
                                    <span class="listenNum">{{formatListenNum(item.listenNum)}}</span>
                                    <span class="play-icon iconfont icon-play"></span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="top-list-group" v-for="(listTop, index) in simpleListGroup" :key="index">
                    <ul class="top-list simple">
                        <p class="group-title">{{listTop.groupName}}</p>
                        <ul class="item-list">
                            <li class="item"
                                v-for="(item, index) in listTop.topList"
                                :key="index"
                                @click="selectItem(item)"
                            >
                                <div class="icon">
                                    <img class="img" :src="item.imgUrl">
                                    <div class="buttom">
                                        <span class="listenNum-icon iconfont icon-headset"></span>
                                        <span class="listenNum">{{formatListenNum(item.listenNum)}}</span>
                                        <span class="play-icon iconfont icon-play"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </ul>
                </li>
            </ul>
            <div class="load-container" v-show="!topListGroup.length">
                <load></load>
            </div>
        </scroll>
        <router-view></router-view>
    </div>
</template>

<script type="text/ecmascript-6">
    import MHeader from 'components/m-header/m-header'
    import Scroll from 'base/scroll/scroll'
    import Load from 'base/load/load'
    import PlayListMixin from 'common/mixins/play-list'
    import { mapMutations } from 'vuex'
    import { getTopList } from 'api/rank'
    import { ERR_OK } from 'api/config'
    import { MINI_PLAYER_HEIGHT, TAB_HEIGHT } from 'common/js/config'
    import { getStyle } from 'common/js/dom'

    export default {
        name: 'rank',
        mixins: [PlayListMixin],
        created() {
            this._getTopList()

            setTimeout(() => {
                this.$refs.topListGroup.refresh()
            }, 1500)
        },
        data() {
            return {
                // 所有的榜单
                topListGroup: [],
                // 巅峰邦有歌曲列表
                listGroup: [],
                // 其他简单榜单只有icon
                simpleListGroup: []
            }
        },
        methods: {
             _getTopList() {
                 getTopList().then((res) => {
                     if (res.code === ERR_OK) {
                         this.topListGroup = this._normalizeTopList(res.toplist.data.group)
                         this.listGroup = this.topListGroup[0]
                         this.simpleListGroup = this.topListGroup.slice(1)
                     }
                 })
             },
             _normalizeTopList(groups) {
                let reg = []

                for (let group of groups) {
                    let list = []
                    for (let item of group.toplist) {
                        list.push({
                            id: item.topId,
                            imgUrl: item.mbFrontPicUrl,
                            picUrl: item.frontPicUrl,
                            updateTips: item.updateTips,
                            title: item.title,
                            topTitle: item.titleDetail,
                            songList: item.song,
                            listenNum: item.listenNum
                        })
                    }
                    reg.push({
                        groupName: group.groupName,
                        topList: list
                    })
                }

                return reg
            },
            formatListenNum(num) {
                let h = num / 10000000 | 0
                let l = (num % 10000000) / 10000 | 0
                if (h > 0) {
                    return `${h},${l}万`
                }
                return `${l}万`
            },
            selectItem(item) {
                this.$router.push({
                    path: `/rank/${item.id}`
                })
                this.setTopList(item)
            },
            handlePlayList(playList) {
                const bottom = playList.length ? `${MINI_PLAYER_HEIGHT + TAB_HEIGHT}px` : ''

                getStyle(this.$refs.rank, 'bottom', bottom)
                this.$refs.topListGroup.refresh()
            },
            ...mapMutations({
                setTopList: 'SET_TOP_LIST'
            })
        },
        components: {
            Scroll,
            Load,
            MHeader
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    @import "~common/stylus/mixin"

    .rank
        position: fixed
        width: 100%
        top: 0
        bottom: $height-tab
        .top-scroll
            height: 100%
            overflow: hidden
            .top-list
                padding: 0px 20px 1px 20px
                .group-title
                    margin: 10px 0
                    font-size: $font-size-large
                    font-weight: bold
                .item
                    display: flex
                    margin-bottom: 20px
                    height: 100px
                    border-radius: 8px
                    background: $color-background-head
                    .song-list
                        flex: 1
                        display: flex
                        flex-direction: column
                        justify-content: center
                        padding: 0 15px
                        height: 100px
                        overflow: hidden
                        color: $color-text
                        font-size: $font-size-small
                        .list-title
                            padding: 10px 0
                            font-size: $font-size-medium-x
                            font-weight: bold
                        .song
                            no-wrap()
                            line-height: 20px
                            .index
                                display: inline-block
                                width: 13px
                                font-weight: bold
                            .singer-name
                                color: $color-text-l
                    .icon
                        flex: 0 0 100px
                        position: relative
                        width: 100px
                        height: 100px
                        &::after
                            content: ''
                            position: absolute
                            top: 0
                            bottom: 0
                            right: 0
                            left: 0
                            background: $color-background-d
                            opacity: .2
                            border-bottom-right-radius: 8px
                            border-top-right-radius: 8px
                        .updata
                            position: absolute
                            right: 5px
                            top: 10px
                            font-size: $font-size-small-s
                            color: $color-text-w
                            z-index: 10
                        .img
                            border-bottom-right-radius: 8px
                            border-top-right-radius: 8px
                        .buttom
                            position: absolute
                            box-sizing: border-box
                            bottom: 5px
                            padding: 0 5px
                            width: 100%
                            height: 22px
                            z-index: 10
                            .listenNum-icon, .listenNum, .play-icon
                                display: inline-block
                                color: $color-text-w
                                line-height: 24px
                                vertical-align: top
                            .listenNum
                                font-size: 11px
                            .listenNum-icon
                                font-size: $font-size-small
                            .play-icon
                                float: right
                                font-size: $font-size-large
            .top-list.simple
                padding: 0px 20px
                .item-list
                    display: grid
                    grid-template-columns: repeat(auto-fill, 100px)
                    justify-content: space-between
                    @media screen and (max-width: 340px)
                        grid-template-columns: repeat(auto-fill, 120px)
                        .item
                            height: 120px
                    .item
                        display: block
                        .icon
                            width: 100%
                            height: 100%
                            &::after
                                border-radius: 8px
                            .img
                                width: 100%
                                height: 100%
                                border-radius: 8px
            .load-container
                position: absolute
                width: 100%
                top: 45%
                transform: translateY(-50%)
</style>
